<template>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="contract-detail-header">
      <div class="contract-detail-header-table">
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td> 物料/产品编码</td>
              <td> {{ MaterialDetail.number }} </td>
              <td> 物料/产品名称 </td>
              <td>{{ `${MaterialDetail.name}` }} </td>
            </tr>
            <tr>
              <td> 规格型号 </td>
              <td>
                {{ MaterialDetail.spec }}
              </td>
              <td> 创建时间</td>
              <td>
                {{
                  dayjs(MaterialDetail.createdAt).format('YYYY-MM-DD hh:mm:ss')
                }}
              </td>
            </tr>
            <tr>
              <td> 基本单位 </td>
              <td>
                {{ MaterialDetail.basicName }}
              </td>
              <td> 启用状态 </td>
              <td> {{ MaterialDetail.enable === 1 ? '启用' : '停用' }} </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="contract-detail-header-qrcode">
        <QRcode
          ref="qrcode"
          :qr-size="150"
          :height="150"
          :width="150"
          :qr-url="`${MaterialDetail.id}`"
        />
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <!-- <MaterialListingList v-if="item.key === '2'"></MaterialListingList> -->
          <baseinfo v-if="item.key === '1'"></baseinfo>
          <Bom v-if="item.key === '2'"></Bom>
          <supplier
            v-if="item.key === '3'"
            :data="MaterialDetail.supplierModel"
            @setSupplierMark="setSupplierMark"
          ></supplier>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import {
    getoneMaterial,
    modSupplierMark,
  } from '@/api/inventory-management/material-management/index';

  import baseinfo from './components/baseinfo.vue';
  import Bom from './components/BOM.vue';
  import supplier from './components/supplier.vue';
  //   import { getoneMaterial } from '@/api';

  const route = useRoute();

  const id = Number(route.query.id);

  const title: string = '档案详情';

  const breadCrumb: string[] = [
    '库存管理',
    '物料管理',
    '物料/产品管理',
    '档案详情',
  ];

  let MaterialDetail = ref<any>({});

  const getcontractDetailData = async () => {
    try {
      const res: any = await getoneMaterial({ id });
      console.log(res);
      MaterialDetail.value = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();

  let tabsActive = ref('1');
  const tabs = reactive([
    {
      key: '1',
      title: '基本信息',
    },
    {
      key: '2',
      title: 'BOM',
    },
    {
      key: '3',
      title: '供应商',
    },
    {
      key: '4',
      title: '替代品',
    },
    {
      key: '5',
      title: '质量检测方案',
    },
    {
      key: '6',
      title: 'SOP',
    },
  ]);

  const setSupplierMark = async (data: any) => {
    await modSupplierMark({ ...data });
    getcontractDetailData();
  };
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;
      height: 196px;
      display: flex;
      &-table {
        width: 70%;
        table {
          width: 100%;
          border-color: #f9f9f9;
          tr {
            height: 58px;
            text-align: center;
          }
          td:nth-child(odd) {
            background-color: #f5f7fa;
            width: 200px;
          }
          td:nth-child(even) {
            width: 389px;
          }
        }
      }
      &-qrcode {
        width: 30%;
        height: 100%;
        border: 1px solid rgb(165, 165, 165);
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: none;
      }
    }
  }
</style>
